<%@ page language="java"
	import="com.google.appengine.api.users.*"
	import="jp.bluecab.bluecabsystem.locrecserv.classes.*"
	import="jp.bluecab.bluecabsystem.common.*"
	import="javax.jdo.*"
	import="java.util.*"
	contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	UserService userService = UserServiceFactory.getUserService(); // (1) ここから
	User user = userService.getCurrentUser();
	String email = user.getEmail(); // (1) ここまで

	PersistenceManager pm = PMF.get().getPersistenceManager(); //(2) ここから
	Query pmquery = pm.newQuery(LocRecUser.class);
	LocRecUser locRecUser = null;

	try {
		pmquery.setFilter("email == pEmail");
		pmquery.declareParameters("String pEmail");
		List<LocRecUser> results = (List<LocRecUser>) pmquery.execute(email); // (2)ここまで
		// 該当ユーザがいない場合は、ログインID登録画面へ移行する
		if (results.size() == 0) {
			response.sendRedirect("/location/signup.jsp"); // (3)
			return;
		}
		locRecUser = results.get(0);
	} finally {
		pm.close();
	}
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>BLUECabGPSSystem</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="/css/locrecserv.css" rel="stylesheet" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="/css/jquery.clockpick.1.2.9.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.8.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.clockpick.1.2.9.min.js"></script>
<script type="text/javascript" src="/js/dateformat.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=JP"></script>
<script type="text/javascript" src="/js/MarkerCluster.js"></script>
<script type="text/javascript">

var marker_list = new google.maps.MVCArray();
var dispFormat = new DateFormat("MM月dd日 HH:mm:ss");
function formatDate(c) {
	var d = c.split(/[-:T+]/);
	d[1] -= 1;
	d.pop();
    var date = new Date(Date.UTC.apply(Date, d));
	return dispFormat.format(date);
}

$(document).ready(function() {

	//今日の日付
	var today = new Date();
	var condFormat = new DateFormat("yyyy/MM/dd");
	$('#dateBegin').val(condFormat.format(today));
	$('#dateEnd').val(condFormat.format(today));

	$.datepicker.regional['ja'] = {
		monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
		monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
		dayNames: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
		dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
		dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
		dateFormat: 'yy/mm/dd', firstDay: 0
	};
	$("#dateBegin").datepicker($.datepicker.regional['ja']);
	$("#dateEnd").datepicker($.datepicker.regional['ja']);

	var optclockpick = {
		starthour : 0,
		endhour : 23,
		military : true
	};
	$('#timeBegin').clockpick(optclockpick);
	$('#timeEnd').clockpick(optclockpick);

	$('#dateAll').click(function(){
		var lst = new Array("#dateBegin","#dateEnd","#timeBegin","#timeEnd");
		if (this.checked){
			for (var i = 0; i < lst.length; i++){
				$(lst[i]).attr("disabled",true);
			}
		} else {
			for (var i = 0; i < lst.length; i++){
				$(lst[i]).removeAttr("disabled");
			}
		}
	});
	var myOptions = {
		center: new google.maps.LatLng(33.150631, 129.740295), // 中央表示座標
		zoom: 13,
		mapTypeControlOptions: {
            style:    google.maps.MapTypeControlStyle.DEFAULT
        },
		mapTypeId: google.maps.MapTypeId.ROADMAP
		/**
			ROADMAP 、通常の表示で、2DのGoogle Mapsを表示
			SATELLITE 、鮮明な航空写真のタイルを表示
			HYBRID 、鮮明な航空写真のタイルに、有名な地物(道路や街の名前など）重ねて表示
			TERRAIN 、山や川などの地形的特徴を持つ地図を表示
		*/
	};
	var map = new google.maps.Map($("#mainmap").get(0), myOptions);
	var infoWindow = new google.maps.InfoWindow;
	var onMarkerClick = function() {
		var _marker = this;
		var latLng = _marker.getPosition();
		infoWindow.setContent('<h3>Marker position is:</h3>' + latLng.lat() + ', ' + latLng.lng());
		infoWindow.open(map, _marker);
	};
	google.maps.event.addListener(map, 'click', function() {
		infoWindow.close();
	});

	var total_cnt = 0;
	var now_page = 1;
	$("#resbtn").click(function() {
		now_page = 1;
		loadHistData();

	});

	function loadHistData() {
		removeMarkers();
		$('.b8').hide();
		$("#ts_route").empty();

		var query = {};
		query["tz"] = "Asia/Tokyo";
		query["target"] = "1";
		query["pageno"] = now_page;
		query["taxino"] = $("#taxino").val();
		if (!$('#dateAll').attr('checked')){
			query["datebegin"]= $("#dateBegin").val() + "-" + $("#timeBegin").val();
			query["dateend"]  = $("#dateEnd").val() + "-" + $("#timeEnd").val();
		}
		//件数
		$.getJSON("/api",query, function(json){
			total_cnt = json;
			if (json == "0") {
				$('.vh').text("[" + $("#taxino").val() + "]履歴情報がありませんでした。");
				$('.b8').show();
				$('#hist_area').hide();
				return;
			}
		});

		//レコード
		query["target"] ="2";
		$.getJSON("/api",query, function(json){
			if (json.length ==0) {
				$('.vh').text("[" + $("#taxino").val() + "]履歴情報がありませんでした。");
				$('.b8').show();
				$('#hist_area').hide();
				return;
			}
			$('#hist_area').show();
			var mapOptions = {
				zoom: 13,
				center: new google.maps.LatLng(json[0].latitude, json[0].longitude),
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				scaleControl: true
			};
			map.setOptions(mapOptions);

			// ルートを表示するマップを設定
			var directionsRenderer = new google.maps.DirectionsRenderer();
			directionsRenderer.setMap(map);

			var points = new Array();
			var markers = [];
			for (i =0; i < json.length; i=i+1){
				//ポイント
				points.push(new google.maps.LatLng(json[i].latitude, json[i].longitude));

				//マーカー
				var imgurl = "";
            	var op_str = "";
            	var no = i +1;
            	if (json[i].operationmode == 1) {
            		imgurl = IMG_RED + no + ".png";
            		op_str = OPMODE_OP;
            	} else if (json[i].operationmode == 2) {
            		imgurl = IMG_BLUE + no + ".png";
            		op_str = OPMODE_REST;
            	} else if (json[i].operationmode == 3) {
            		imgurl = IMG_GREEN + no + ".png";
            		op_str = OPMODE_OUT;
            	}
        		var marker = new google.maps.Marker({
        			position: new google.maps.LatLng(json[i].latitude, json[i].longitude),
        			icon: imgurl,
        			title: json[i].loginid + ' ： ' + op_str,
        			map: map
        		});
        		marker_list.push(marker);
        		addHistList(i, json, imgurl);
			}
			// ラインを設定
			poly.setOptions(polyLineOptions);
			poly.setPath(points);
			poly.setMap(map);

			//ページ数
			var ttlpage = Math.floor((total_cnt + 20 -1) / 20);
			$("#ts_navi").empty();
			if (now_page > 1) $("#ts_navi").append($("<a/>").attr("href", "#").css("cursor", "pointer").text("前へ").click(function(){--now_page;loadHistData();}));
			$("#ts_navi").append($("<span/>").text(" "+ now_page + " / " + ttlpage + "ページ "));
			if (now_page < ttlpage) $("#ts_navi").append($("<a/>").attr("href", "#").css("cursor", "pointer").text("次へ").click(function(){++now_page;loadHistData();}));
		});
	}

	function addHistList(i, json, imgurl) {
		//リスト作成
		var $jqObj = $("<div/>").addClass("segmentdiv").css("-webkit-user-select", "none").attr("id", "step_" +i)
								.attr("latitude", json[i].latitude)
								.attr("longitude", json[i].longitude)
								.hover(function(){
									$(this).addClass("ts_hover");
								}, function(){
									$(this).removeClass("ts_hover");
								})
								.click(function(){
									$('.vline-solid').addClass("vline-dotted").removeClass("vline-solid");
									$('.location').removeClass("location_ov");
									$('.vline-dotted', this).addClass("vline-solid").removeClass("vline-dotted");
									$('.location', this).addClass("location_ov");
									map.setCenter(new google.maps.LatLng($(this).attr("latitude"), $(this).attr("longitude")));
									//map.setZoom(17);
								});

		var $jqObj2 = $("<div/>").addClass("icon").append($("<img/>").addClass("baloon").attr("src", imgurl)).append($("<div/>").addClass("vline-dotted"));
		var $jqObj3 = $("<div/>").addClass("clip-region").append($("<div/>").addClass("location").text(formatDate(json[i].createdAt)));
		$jqObj.append($jqObj2);
		$jqObj.append($jqObj3);
		$("#ts_route").append($jqObj);
	}

	var poly = new google.maps.Polyline(polyLineOptions);
	var polyLineOptions = {
			//path: points,
			strokeWeight: 5,//ピクセル単位のストローク幅
			strokeColor: "#ff0000",
			strokeOpacity: "0.5"//0.0～1.0 で指定されたストロークの不透明度
		};

	function removeMarkers() {
		//ボタンが押されたら、マーカーの配列に対して
		//setMap(null)を実行し、地図から削除
		marker_list.forEach(function(marker, idx) {
			marker.setMap(null);
		});
		marker_list.clear();
		//Polylineも一緒に非表示
		poly.setMap(null);
	}
});
var IMG_BLUE = "../image/icon/iconb";
var IMG_RED = "../image/icon/iconr";
var IMG_GREEN = "../image/icon/icong";
var OPMODE_OP = "業務中";
var OPMODE_REST = "休憩中";
var OPMODE_OUT = "業務終了";

</script>
<body>
	<div id="header">
		<div id="logo">
			<h1>
				<a href="#">BLUE Cab GPS System</a>
			</h1>
		</div>
		<div id="menu">
			<ul>
				<div align="right">
					ログインユーザー： <%= locRecUser.getLoginId() %>
					<a href="/location/index.jsp">GPS現在地</a>
					<a href="<%=userService.createLogoutURL("/")%>">ログアウト</a>
				</div>
			</ul>
		</div>
	</div>

	<div id="wrapper">
		<div id="page">
			<div id="content">
				<div class="post">
					<div class="entry">
						<!-- <div id="mainmap" style="width: 500px; height: 500px;"></div> -->
						<div id="mainmap" style="width: 100%; height: 100%"></div>
					</div>
				</div>
			</div>

			<div id="sidebar">
				<ul>
					<li>
						<h2>読込条件</h2>
						<ul>
							<a href="/location/index.jsp">メインに戻る</a>
							<% if (userService.isUserAdmin()){ %><a href='/admin/index.jsp'>管理画面</a><% } %>
						</ul>
						<ul>
						<h3>車両番号</h3>
						<input id="taxino" type="text" size="3" title="車両指定" style="ime-mode: disabled;" />
						<input id="dateAll" type="checkbox" value="1"/><label for="dateAll">最新24時間</label>
						<input type="submit" id="resbtn" class="sb" value="検索" />
<!--                     <li> -->
						<h3>開始</h3>
						<input id="dateBegin" type="text" size="11" value="2011/01/01" />
						<input id="timeBegin" type="text" size="5" value="9:00">
<!--                     </li> -->
<!--                     <li> -->
						<h3>終了</h3>
						<input id="dateEnd" type="text" size="11"  value="2012/01/01" />
						<input id="timeEnd" type="text" size="5" value="20:00">
<!--                     </li> -->
						</ul>
					</li>
					<div class="b8" aria-live="polite" aria-atomic="true" style="display: none;">
						<div class="J-J5-Ji">
							<div class="UD"></div>
							<div class="vh"></div>
							<div class="UB"></div>
						</div>
					</div>

					<li id="hist_area" style="display: none;">
						<h2>ルート一覧</h2>
						<div id="ts_navi" class="ts_navidiv"></div>
						<div id="ts_route" class="ts_routediv">
							<div class="segmentdiv" id="step_0_0_segment">
								<div class="icon-nobullet">
									<div class="vline-dotted">  </div>
								</div>
								<div class="clip-region">
									<span class="location">ハウステンボス</span>
								</div>
							</div>
							<div class="segmentdiv" id="step_0_1_segment">
								<div class="icon">
									<div class="bulleticon dir-bullet-dotted"></div>
									<div class="vline-solid">  </div>
								</div>
								<div class="clip-region">
								</div>

							</div>
						</div>
					</li>
				</ul>

			</div>
		</div>
	</div>
	<div id="footer" style="clear: both;">Copyright &copy  BLUE Cab Group. SaseboTaxi Inc. All Rights Reserved.</div>

</body>
</html>
